<template>
  <div class='container-articles'>
    <!-- 放置一个卡片 -->
    <el-card>
      <!-- 第一行关键字搜索 -->
      <el-row>
        <!-- 左侧搜索框 -->
        <el-col :span="18">
          <el-form
            size="small"
            :inline="true"
            :model="sizer"
            class="demo-form-inline"
          >
            <el-form-item label="关键字">
              <el-input
                v-model="sizer.keyword"
                placeholder="请输入关键字"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="sizer.state"
                placeholder="请选择状态"
              >
                <el-option
                  label="屏蔽"
                  value="0"
                ></el-option>
                <el-option
                  label="开启"
                  value="1"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button
                type="primary"
                @click="search"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 右侧新增技巧按钮 -->
        <el-col :span="6">
          <el-button
            style="float:right"
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="showDialog=true"
          >新增技巧</el-button>
        </el-col>
      </el-row>
      <!-- 第二行数据总条数 -->
      <el-alert
        class="hint"
        :title=" `数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 第三行表格内容 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          width="60"
          type="index"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          width="350"
        >
          <template slot-scope="{row}">
            {{ row.title }}
            <i
              v-if="row.videoURL"
              class="el-icon-film"
              @click="videoShow(row.videoURL)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="visits"
          label="阅读数"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="录入人"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="180"
        >
          <template
            slot-scope="{row}">{{row.createTime|parseTimeByString}}</template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="100"
        >
          <template
            slot-scope="{ row }">{{ row.state == 1 ? '已启用':'已屏蔽'}}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="250"
        >
          <template slot-scope="{row}">
            <el-button
              type="text"
              @click="preview(row)"
            >预览</el-button>
            <el-button
              type="text"
              @click="Disabled(row)"
            >{{ row.state === 1 ? '禁用' : '启用'}}</el-button>
            <el-button
              @click="modify(row)"
              type="text"
              :disabled="row.state == '1' ? true : false "
            >修改</el-button>
            <el-button
              @click="expurgate(row)"
              :disabled="row.state == '1' ? true : false "
              type="text"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 第四行表格分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="page"
        background
        :current-page="sizer.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="sizer.pagesize"
        layout="prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新增弹层 -->
    <ArticlesAdd
      ref="addArticles"
      :showDialog.sync='showDialog'
      @update='list()'
    />

    <!-- 预览弹层 -->
    <ArticlesPreview
      ref="Preview"
      :showDialog='showPreviewDialog'
      @update='showPreviewDialog=false'
    />

    <!-- 视频弹层 -->
    <div
      v-if="videoPreview"
      class="video-preview"
    >
      <div
        class="close"
        @click="CloseVideo"
      >
        <span class="el-icon-close"></span>
      </div>
      <div class="box">
        <video :src="videoUrl" autoplay controls></video>
      </div>
    </div>
  </div>
</template>

<script>
// 导入获取文章列表的接口请求
import { list, remove, changeState } from '@/api/hmmm/articles.js'
// 导入新增弹出层
import ArticlesAdd from '../components/articles-add'
// 导入预览弹出层
import ArticlesPreview from '../components/articles-preview'
export default {
  name: 'articles-page',
  components: {
    ArticlesAdd,
    ArticlesPreview
  },
  data () {
    return {
      // 搜索框数据
      sizer: {
        // 关键字
        keyword: '',
        // 当前页数
        page: 1,
        // 页码尺寸
        pagesize: 10
        // 屏蔽状态
        // state: ''
      },
      // 表格内容数据
      tableData: [],
      // 表格数据总条数
      total: 0,
      // 记录视频的地址
      videoUrl: '',
      // 控制视频遮罩层显示隐藏
      videoPreview: false,
      // 控制新增弹层的显示隐藏
      showDialog: false,
      // 控制预览弹层的显示隐藏
      showPreviewDialog: false
    }
  },
  created () {
    // 在页面开始加载时候，先调用渲染列表的方法
    this.getArticles()
  },
  methods: {

    // 获取列表数据，渲染列表，强制等待数据加载完成 async
    async getArticles () {
      // api中封装函数数据接口的请求方法.api传递的所有参数都是对象
      // 把接口需要的数据传入进去
      const { data } = await list(this.sizer)
      console.log(data)
      // 获取数据成功之后，先给表格数据赋值,然后给数据总条数赋值
      this.tableData = data.items
      this.total = data.counts
    },

    // 页面尺寸pageSize 改变时会触发
    handleSizeChange (val) {
      // 先让当前页码变为1
      this.sizer.page = 1
      // 赋值给最新的页面尺寸
      this.sizer.pagesize = val
      // 重新获取分页
      this.getArticles()
    },

    // 监听页码currentPage 改变时会触发
    handleCurrentChange (val) {
      // 先让当前页码变为1
      this.sizer.page = 1
      // 使页码等于最新的页码
      this.sizer.page = val
      // 重新获取分页
      this.getArticles()
    },

    // 搜索按钮点击时触发
    search () {
      // 先让当前页码变为1
      this.sizer.page = 1
      // 重新获取分页
      this.getArticles()
    },

    // 监听清除按钮
    clear () {
      // 先让当前页码变为1
      this.sizer.page = 1
      // 清空搜索框和状态
      this.sizer = {
        // 关键字
        keyword: '',
        // 当前页数
        page: 1,
        // 页码尺寸
        pagesize: 10
        // 屏蔽状态
        // state: ''
      }
    },

    // 删除按钮的绑定事件
    async expurgate (row) {
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        await remove(row)
        // this.$message.success('删除成功')
        this.getArticles()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },

    // 预览按钮的点击事件
    async preview (data) {
      // 获取数据
      await this.$refs.Preview.getdetail(data)
      // 打开弹层
      this.showPreviewDialog = true
    },

    // 禁用按钮的点击事件
    async Disabled (data) {
      try {
        await changeState({
          id: data.id,
          state: data.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功！')
        data.state = data.state === 1 ? 0 : 1
        // 重新获取分页
        // this.getArticles()
      } catch (e) {
        console.log('操作失败')
      }
      // await changeState(data)
      // data.state = data.state === 1 ? 0 : 1
      // this.$message.success('操作成功！')
    },

    // 修改按钮的点击事件
    modify (data) {
      // 调用子组件的方法
      this.$refs.addArticles.getdetail(data)
      // 打开弹层
      this.showDialog = true
    },

    // 视频图标点击事件
    videoShow (url) {
      // 将当前的视频地址赋值给视频标签的 src
      this.videoUrl = url
      // 打开遮罩层
      this.videoPreview = true
    },

    // 关闭视频弹层的点击事件
    CloseVideo () {
      // 清空 url
      this.videoUrl = ''
      // 关闭遮罩层
      this.videoPreview = false
    }
  }
}
</script>

<style scoped lang='scss'>
.container-articles {
  padding: 15px;
  .hint {
    margin-bottom: 15px;
  }
  .page {
    margin: 10px;
    float: right;
  }
}
.el-icon-film {
  color: #0000ff;
}
.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
